dbusServices/extensions: Stop stacking frames

We currently use separate frames for the details expander and the
expanded details. That layout works as long as frames are boxy (as
in the default GTK3 style), but breaks down with rounded corners
(as in the default GTK4 style).

In order to work with either style, adapt the layout to use a single
surrounding frame and appropriate borders as separator.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1495>

diff --git a/js/dbusServices/extensions/css/application.css b/js/dbusServices/extensions/css/application.css
index 1acbf36c8972907d2115a843d6c234e21b8a2f48..fb7c475567d011f4ca798433430c026f27618e4d 100644 (file)
--- a/js/dbusServices/extensions/css/application.css
+++ b/js/dbusServices/extensions/css/application.css
@@ -1,4 +1,4 @@
-.expander-frame > * { border-top-width: 0; }
+.expanded { border: 0 solid @borders; border-bottom-width: 1px; }
 .expander-toolbar {
   border: 0 solid @borders;
   border-top-width: 1px;

diff --git a/js/dbusServices/extensions/extensionsService.js b/js/dbusServices/extensions/extensionsService.js
index 456ca6ba79eca3902c8b8e0b2adb9701f4c8abcd..34107cdb322f270a57cadb9ae396e688e56b34bb 100644 (file)
--- a/js/dbusServices/extensions/extensionsService.js
+++ b/js/dbusServices/extensions/extensionsService.js
@@ -192,7 +192,10 @@ var ExtensionPrefsDialog = GObject.registerClass({
             this._expanderArrow.icon_name = this._revealer.reveal_child
                 ? 'pan-down-symbolic'
                 : 'pan-end-symbolic';
+            this._syncExpandedStyle();
         });
+        this._revealer.connect('notify::child-revealed',
+            () => this._syncExpandedStyle());
 
         try {
             ExtensionUtils.installImporter(extension);
@@ -211,6 +214,13 @@ var ExtensionPrefsDialog = GObject.registerClass({
         }
     }
 
+    _syncExpandedStyle() {
+        if (this._revealer.reveal_child)
+            this._expander.get_style_context().add_class('expanded');
+        else if (!this._revealer.child_revealed)
+            this._expander.get_style_context().remove_class('expanded');
+    }
+
     _setError(exc) {
         this._errorView.buffer.text = `${exc}\n\nStack trace:\n`;
         // Indent stack trace.

diff --git a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
index 020bc4462947aa876324f7bd043149895c9ae9d3..9e51e3c58e9214a0db7d544eafc7500563b68f9e 100644 (file)
--- a/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
+++ b/js/dbusServices/extensions/ui/extension-prefs-dialog.ui
@@ -53,16 +53,16 @@
                       </object>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkFrame">
                         <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
                         <property name="margin-top">12</property>
                         <child>
-                          <object class="GtkFrame" id="expander">
+                          <object class="GtkBox">
                             <property name="visible">True</property>
                             <property name="hexpand">True</property>
+                            <property name="orientation">vertical</property>
                             <child>
-                              <object class="GtkEventBox">
+                              <object class="GtkEventBox" id="expander">
                                 <property name="visible">True</property>
                                 <child>
                                   <object class="GtkBox">
@@ -88,17 +88,9 @@
                                 </child>
                               </object>
                             </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkRevealer" id="revealer">
-                            <property name="visible">True</property>
                             <child>
-                              <object class="GtkFrame">
+                              <object class="GtkRevealer" id="revealer">
                                 <property name="visible">True</property>
-                                <style>
-                                  <class name="expander-frame"/>
-                                </style>
                                 <child>
                                   <object class="GtkBox">
                                     <property name="visible">True</property>